/**
 * Created by kevin on 16/8/16.
 */
var eosi = window.eosi || {};
this.eosi.fotile = this.eosi.fotile || {};
//this.eosi.fotile = this.eosi.fotile || {};
//this.eosi.fotile = function(name) {
//    this.name = name;
//};

(function (window) {
    // the application

    function Fotileindex(fotile) {
        this.version = fotile.version
        this.Container_constructor();//调用父类的构造函数
        this.init(fotile);
    }
    var p = createjs.extend(Fotileindex, createjs.Container);
    // public methods:
    p.init = function (fotile) {
        this.fotile = fotile;
        console.log("I'm robot index page!!!");
        // this.setupLoaderUI();
        this.loadFirsrMaster();
    }
    p.loadFirsrMaster = function (){
        var fotile=this;
        var load=[
        {src:"static/master/index/bg.jpg",id:"bg"},
        {src:"static/master/index/bg_bottom.png",id:"bg_bottom"},
        {src:"static/master/index/bird.png",id:"bird"},
        {src:"static/master/index/bird1.png",id:"bird1"},
        {src:"static/master/index/bird2.png",id:"bird2"},
        {src:"static/master/index/bird3.png",id:"bird3"},
        {src:"static/master/index/cloud1.png",id:"cloud1"},
        {src:"static/master/index/cloud2.png",id:"cloud2"},
        {src:"static/master/index/items.png",id:"items"},
        {src:"static/master/index/text_box_bg.png",id:"text_box_bg"},
        {src:"static/master/index/logo.png",id:"logo"},
        {src:"static/master/text/a_1.png",id:"a_1"},
        {src:"static/master/text/a_2.png",id:"a_2"},
        {src:"static/master/text/a_3.png",id:"a_3"},
        {src:"static/master/text/a_4.png",id:"a_4"},
        {src:"static/master/text/a_5.png",id:"a_5"},
        {src:"static/master/text/a_6.png",id:"a_6"},
        {src:"static/master/downarrow.png",id:"downarrow"},
        {src:"js/Fotileindex.js",id:"Fotileindex"},];
        Fotileloader = new eosi.fotile.Fotileloader(this.fotile,load,function(){
            fotile.setupLoaderUI();
            container.removeChild(Fotileloader);
            Fotileloader.clearLoading();//清空loadingUI
        },0);
        container.addChild(Fotileloader);
    }
    p.setupLoaderUI = function (){
        _this=this;
        var bg = new createjs.Bitmap(this.fotile.master_UILoader.getResult("bg"));
        var bn = new createjs.Bitmap(this.fotile.master_UILoader.getResult("bg_bottom"));
        var text_box_bg = new createjs.Bitmap(this.fotile.master_UILoader.getResult("text_box_bg"));
        var logo = new createjs.Bitmap(this.fotile.master_UILoader.getResult("logo"));
        var a_1 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_1"));
        var a_2 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_2"));
        var a_3 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_3"));
        var a_4 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_4"));
        var a_5 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_5"));
        var a_6 = new createjs.Bitmap(this.fotile.master_UILoader.getResult("a_6"));
        var downarrow = new createjs.Bitmap(this.fotile.master_UILoader.getResult("downarrow"));

        var v_w = bg.getBounds().width;
        var v_h = bg.getBounds().height;
        var w = this.fotile.getWidth();
        var h = this.fotile.getHeight();
        var ratio_y = h/v_h;
        var ratio_x =  w/v_w;
        bg.setTransform(0,0,ratio_x,ratio_y);
        bg.x=0;
        bg.y=0;

        bn.setTransform(0,0,ratio_x,ratio_x);
        bn.x = 0;
        bn.y = this.fotile.getHeight();
        bn.alpha = 1;
        createjs.Tween.get(bn)
            .to({ y: (this.fotile.getHeight())-bn.getBounds().height*ratio_x,alpha:1}, 1000, createjs.Ease.sineOut);
        text_box_bg.setTransform(0,0,ratio_x*1.04,ratio_x*1.04);
        text_box_bg.x = this.fotile.getWidth()/2-text_box_bg.getBounds().width*ratio_x*1.04/2;
        text_box_bg.y = (this.fotile.getHeight()/2)-(text_box_bg.getBounds().height*ratio_x*1.04/2.4);
        text_box_bg.alpha = 1;

        logo.setTransform(0,0,ratio_x,ratio_x);
        logo.x = this.fotile.getWidth()/2-logo.getBounds().width*ratio_x/2;
        logo.y = (this.fotile.getHeight()/4.5)-(logo.getBounds().height*ratio_x/2);
        logo.alpha = 1;

        a_1.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_1.x = this.fotile.getWidth()/2-a_1.getBounds().width*ratio_x*1.3/2;
        a_1.y = (this.fotile.getHeight()/2.45)-(a_1.getBounds().height*ratio_x*1.3/2);
        a_1.alpha = 0;
        createjs.Tween.get(a_1)
            .wait(1000)
            .to({alpha:1}, 500, createjs.Ease.linear);
        
        a_2.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_2.x = this.fotile.getWidth()/2-a_2.getBounds().width*ratio_x*1.3/2;
        a_2.y = (this.fotile.getHeight()/2.15)-(a_2.getBounds().height*ratio_x*1.3/2);
        a_2.alpha = 0;
        createjs.Tween.get(a_2)
            .wait(2000)
            .to({alpha:1}, 500, createjs.Ease.linear);

        a_3.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_3.x = this.fotile.getWidth()/2-a_3.getBounds().width*ratio_x*1.3/2;
        a_3.y = (this.fotile.getHeight()/1.9)-(a_3.getBounds().height*ratio_x*1.3/2);
        a_3.alpha = 0;
        createjs.Tween.get(a_3)
            .wait(3000)
            .to({alpha:1}, 500, createjs.Ease.linear);

        a_4.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_4.x = this.fotile.getWidth()/2-a_4.getBounds().width*ratio_x*1.3/2;
        a_4.y = (this.fotile.getHeight()/1.7)-(a_4.getBounds().height*ratio_x*1.3/2);
        a_4.alpha = 0;
        createjs.Tween.get(a_4)
            .wait(4000)
            .to({alpha:1}, 500, createjs.Ease.linear);

        a_5.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_5.x = this.fotile.getWidth()/2-a_5.getBounds().width*ratio_x*1.3/2;
        a_5.y = (this.fotile.getHeight()/1.55)-(a_5.getBounds().height*ratio_x*1.3/2);
        a_5.alpha = 0;
        createjs.Tween.get(a_5)
            .wait(5000)
            .to({alpha:1}, 500, createjs.Ease.linear);
        a_6.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        a_6.x = this.fotile.getWidth()/2-a_6.getBounds().width*ratio_x*1.3/2;
        a_6.y = (this.fotile.getHeight()/1.4)-(a_6.getBounds().height*ratio_x*1.3/2);
        a_6.alpha = 0;
        createjs.Tween.get(a_6)
            .wait(6000)
            .to({alpha:1}, 500, createjs.Ease.linear);

        downarrow.setTransform(0,0,ratio_x*1.3,ratio_x*1.3);
        downarrow.x = this.fotile.getWidth()/2-downarrow.getBounds().width*ratio_x*1.3/2;
        downarrow.y = (this.fotile.getHeight())-(downarrow.getBounds().height*ratio_x*1.3)*2;
        createjs.Tween.get(downarrow,{loop:true})
            .to({y:(this.fotile.getHeight()-(downarrow.getBounds().height*ratio_x*1.3))}, 1000, createjs.Ease.linear)
            .to({y:(this.fotile.getHeight())-(downarrow.getBounds().height*ratio_x*1.3)*2}, 1000, createjs.Ease.linear);

        this.addChild(bg);
        this.addChild(text_box_bg);
        this.addChild(logo);
        this.addChild(a_1);
        this.addChild(a_2);
        this.addChild(a_3);
        this.addChild(a_4);
        this.addChild(a_5);
        this.addChild(a_6);
        this.addChild(bn);
        this.addChild(downarrow);
        function clickPlayBn(){
            master.clearLoading();
            FotileMaster.loadMasterUIRes();
            container.addChild(FotileMaster);
        }
        FotileMaster = new eosi.fotile.FotileMaster(_this.fotile);
        document.getElementById("canvas").addEventListener("click",clickPlayBn);
        this.clearLoading=function (){
            this.removeChild(bg);
            this.removeChild(text_box_bg);
            this.removeChild(logo);
            this.removeChild(a_1);
            this.removeChild(a_2);
            this.removeChild(a_3);
            this.removeChild(a_4);
            this.removeChild(a_5);
            this.removeChild(a_6);
            this.removeChild(bn);
            this.removeChild(downarrow);

            document.getElementById("canvas").removeEventListener("click",clickPlayBn);
            container.removeChild(master);
            stage.update();
        }
        // this.clearLoading=function (){
        //     // this.removeChild(bn);
        //     // this.removeChild(bg);
        //     // this.removeChild(text);
        //     // this.removeChild(this.progress);
        //     // stage.update();
        // }
    }

    window.eosi.fotile.Fotileindex = createjs.promote(Fotileindex, "Container");
}(window));
